import { useEffect, useState } from 'react';

const calcRect = (elm: HTMLElement) => {
  const { top, left } = elm?.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;

  return {
    width: innerWidth - left,
    height: innerHeight - top,
  };
};

const useContainer = (ref: any) => {
  const [rect, setRect] = useState<{ width?: number; height?: number }>({});

  const updateRect = () => {
    setRect(calcRect(ref?.current));
  };

  useEffect(() => {
    updateRect();

    window.addEventListener('resize', updateRect);
    return () => {
      window.removeEventListener('resize', updateRect);
    };
  }, []);

  return rect;
};

export default useContainer;
